<template lang="pug">
.history-list
  .tops
    el-input(placeholder="请输入订单号" v-model="order_number" style='width:150px' size="mini")
    el-checkbox-group(v-model="groupList" @change="handleCheckedCitiesChange")
      el-checkbox(v-for="item in group" :key="item.status" :label="item.status" :disabled="status==item.status?true:false") {{item.name}}
    el-button(type="primary" size="mini" @click="onSea") 查找
    el-button(type="primary" size="mini" v-show="status==0?false:true" @click="onResert") 重置
  el-table(:data="historyList" border style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#606266'}")
    el-table-column(prop="order_number" label="订单编号")
    el-table-column(label="会员消息")
      template(slot-scope="scope")
        .cell
          .n-w
            i.el-icon-user-solid
            | {{scope.row.member_name?scope.row.member_name:'未提供'}}
          .n-w
            i.el-icon-phone
            | {{scope.row.phone}}
    el-table-column
      template(slot="header")
        | 取餐时间<br/>取餐方式
      template(slot-scope="scope")
        | {{scope.row.meal_time}}<br/>{{scope.row.meal_type}}
    el-table-column(label="商品")
      template(slot-scope="scope")
        .cell(v-for="d in scope.row.products")
          | {{d.name}} x {{d.count}}
    el-table-column(label="总价(元)")
      template(slot-scope="scope")
        .cell
          | ￥{{scope.row.products.map(i => i.count * i.price).reduce((x,y) => x+y)}}
    el-table-column(label="状态")
      template(slot-scope="scope")
        el-tag(:type="scope.row.status_name==='已完成'?'success':'warning'") {{scope.row.status_name}}
  footer
    el-pagination(
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page+1"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total")
</template>

<script>
export default {
  data() {
    return {
      historyList:[],
      group:[{
        name:'已完成',
        status:4
      },{
        name:'已取消',
        status:5
      }],
      groupList:[4,5],
      limit:5,
      page:0,
      order_number:'',
      status:0,
      total:0
    }
  },
  created() {
    this.data()
    console.log(this.status);
  },
  methods: {
    data() {
      const { limit,page,order_number,status } = this;
      this.axios.get('/order/history',{
        params:{limit,page,order_number,status}
      }).then(({data}) => {
        if(!data.errcode){
          this.historyList = data.data.list
          this.total = data.data.total
        }
      })
    },
    onSea() {
      this.data()
    },
    onResert() {
      this.status = 0
      this.groupList=[4,5]
      this.data()
    },
    handleSizeChange(size) {
      this.limit = size
      this.data()
      // console.log(1,size);
    },
    handleCurrentChange(size) {
      // console.log(2,size);
      this.page = size-1
      this.data()
    },
    handleCheckedCitiesChange(value){
      console.log(value);
      if(value.length == 2){
        this.status = 0
      }else {
        this.status = value[0]
      }
    }
  },
}
</script>
<style lang="sass">
.history-list
  padding: 10px
  .tops
    display: flex
    align-content: center
    .el-checkbox-group
      margin: auto 0
      margin-left: 15px
</style>
